<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>便签站</title>
    <!--<link rel="stylesheet" href="../css/index.css">-->
    <link rel="stylesheet" href="../static/css/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript"></script>

</head>
<body>
    <div id="app">
        <h2><a href="/book/login">时光角</a></h2>
        <div class="notes">
            <div class="note" v-for="(c,d) in tables" ::key="d">
                <div class="to">To : {{c.to}}</div>

                <div class="text"><div class="tes"><p class="texts">{{c.text}}</p></div></div>

                <div class="from">From : {{c.from}}</div>
            </div>
        </div>
        <button class="buton" v-on:click="a()"></button>
        <button class="adb" title="写一封不会邮寄的信" v-on:click="changes()">+</button>
        <button class="sel" title="寻一份过去的时光" v-on:click="changes2()"><svg t="1606199069012" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2869" width="30px" height="30px"><path d="M938.2 832.6L723.8 618.1l-7.9-6.4c36.2-55.6 57.4-121.8 57.4-193.1C773.3 222.8 614.6 64 418.6 64 222.8 64 64 222.8 64 418.6c0 195.9 158.8 354.6 354.6 354.6 71.3 0 137.5-21.2 193.1-57.4l6.3 7.8L832.4 938c14.6 14.6 33.7 21.9 52.8 21.9 19.1 0 38.2-7.3 52.8-21.9 29.3-29 29.3-76.3 0.2-105.4zM418.6 661.3C284.9 661.3 176 552.4 176 418.6 176 284.9 284.9 176 418.6 176c133.8 0 242.7 108.8 242.7 242.6S552.4 661.3 418.6 661.3z" p-id="2870" fill="rgba(0, 0, 0, 1)"></path></svg></button>
        <div  v-bind:class="{ 'active': isActive }" style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;">
        <div class="dialog">
            <div >
                <div class="toup">To : <input type="text" v-model="from.to" /></div>
                <div class="testup"><textarea type="text" v-model="from.text" ></textarea></div>
                <div class="fromup">From ：<input type="text" v-model="from.from" /></div>
                <div style="text-align: left;margin-left: 50px;">权限：<select v-model="from.hide" >
                    <option value =0 >所有人可查看</option>
                    <option value =1>输入钥匙查看</option>
                    <option value =2>只能查看一次</option>
                    </select>
            </div>
            </div>
            <button class="my-btn-gray"  v-on:click="changes()">×</button>
               <button class="my-btn-blue" v-on:click="ads()" >发送</button>
        </div>
    </div>
    <div v-bind:class="{ 'active': isActive2 }"  style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;">
        <div v-on:click="changes2()" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 5;"></div>
        <div class="soso">
            <input type="text"  autofocus="autofocus" v-model="mailID"><button v-on:click="sele()" >搜索</button>
        </div>
    </div>
    <div  v-bind:class="{ 'active': isActive3 }" style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;">
        <div class="dialog">
            <div >
                <div class="toup">To : {{from.to}}</div>
                <div class="testup" style="float: left;margin-left: 70px;display: table;"><div class="seeltext">{{from.text}}</div></div>
                <div class="fromup" style="float: right;margin-top: 20px;margin-right: 30px;">From ：{{from.from}}</div>

            </div>
            <button class="my-btn-gray"  v-on:click="changes3()">×</button>
            </div>
        </div>
    </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                from:{mailID:'',to:'',text:'',from:'',see:'',hide:0,date:''},
                isActive:true,
                isActive2:true,
                isActive3:true,
                mailID:'5211314',
                umailID:'',
                clums: ['mailID','to','text','from','see','hide','date'],
                tables:[
                    {mailID:'123456',to:'刘德华',text:'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',from:'郭凤臣',see:0,hide:1,date:"1"},
                    {mailID:'123456',to:'刘德华',text:'bbbbbbb',from:'郭凤臣',see:0,hide:1,date:"1"},
                    {mailID:'123456',to:'刘德华',text:'我把活着喜欢过了',from:'郭凤臣',see:0,hide:1,date:"0"},
                    {mailID:'123456',to:'爱别离',text:'从没想过我们会分离，直到高考前离校的那个下午。你微笑着招手，却不是为我。你微笑着招手，却不是为我。你微笑着招手，却不是为我。你微笑着招手，却不是为我。你微笑着招手，却不是为我。你微笑着招手，却不是为我。你微笑着招手，却不是为我。111',from:'恨喜爱',see:0,hide:1,date:"1"},
                    {mailID:'123456',to:'刘德华',text:'aaaaaaa',from:'郭凤臣',see:0,hide:1,date:"0"}
                ]
        }
        },
        methods: {
            a:function(){
                for(var i=0;i<this.tables.length;i++){
                var a=document.getElementsByClassName("note")[i];
                a.style.top=(Math.random()*0.7*100)+"%";
                a.style.left=(Math.random()*0.7*100)+"%";

            }
            },
            b:function(){
                const _this = this
                axios.get('http://localhost:8081/book/note').then(function(resp){
                _this.tables=resp.data
                console.log("这是时光未曾经过的角落，流淌着不曾说出的感情。")
                }).catch(function (error) { // 请求失败处理
                console.log(error);
                })
            },
            changes:function(){
                if(this.isActive== true){
                this.isActive=false;}else{
                    this.isActive=true;
                    this.delfrom();
                }
            },
            changes2:function(){
                if(this.isActive2== true){
                this.isActive2=false;}else{
                    this.isActive2=true;
                }
            },
            changes3:function(){
                if(this.isActive3== true){
                this.isActive3=false;}else{
                    this.isActive3=true;
                    this.delfrom();
                }
            },
            delfrom:function(){
                this.from={mailID:'',to:'',text:'',from:'',see:'',hide:0,date:''};

            },
            ads:function(){
                const _this=this
                axios.post('http://localhost:8081/book/adds',_this.from).then(function(resp){
                    _this.umailID=resp.data;
                    alert("这是你的钥匙 : "+_this.umailID);
            });
                this.changes();
                },
                sele:function(){
                const _this=this
                axios.get('http://localhost:8081/book/sele/'+_this.mailID).then(function(resp){
                    _this.from=resp.data;
            });
                this.changes2();
                this.changes3();
                }
        },
        created(){

        },
        mounted() {
            //this.b();
            this.a();
        },
    });
</script>
